استایل دهی به پیام خطای اعتبارسنجی:
پیام خطایی که بهنگام نامعتبر بودن محل ورود استفاده کننده، بصورت پاپ آپ (popup) نشان داده می شود، در مرورگرهای گوناگون به انواع متفاوت نشان داده می شود که ممکن میباشد با پباده سازی UI سایت شما ناسازگاری داشته باشد. به تصویر ذیل اعتنا نمایید:

طراحی سایت

استایل دهی به پیام خطای اعتبارسنجی

گوگل کروم اذن ویرایش و استایل دهی به پاپ آپ اعتبارسنجی HTML5 را نمی دهد. فقط راهی که باقی میماند، تایپ کردن دوباره این پاپ آپ (POPUP) بوسیله جاوااسکریپت میباشد. برای اینکار بصورت تحت فعالیت فرمائید:

سفارشی سازی توسعه یافته اعتبارسنجی HTML5:
درین بخش می‌خواهیم پیامی که در رخ نامعتبر (invalid) بودن محل ورود، بصورت پاپ آپ (popup) به استفاده کننده نشان داده می شود را سفارشی سازی کنیم. در صدر نیاز هست بصورت پایین، دو المان input موردنظر و فرم را گزینش (select) کنیم:

var input = document.getElementById(‘username’);

var form = document.getElementById(‘form’);

بعد از آن می بایست المانی را ساخت کنیم که شامل پیام سفارشی ما باشد:

var elem = document.createElement(‘div’);

elem.id = ‘notify’;

elem.style.display = ‘none’;

form.appendChild(elem);

در کد فوق، یک div با id برابر notify تعریف و تمجید کرده ایم و آن را با تمجید display:none نهفته کردیم. در غایت، این div را به انتهای فرم بیشتر (append) کرده ایم.

فعالیت کردن با حوادث (Working with events):
درین نمونه ما با دو اتفاق افتاد (event) سروکار داریم. او‌لین اتفاق افتاد invalid می باشد که در فیس نامعتبر بودن محل ورود استفاده کننده فراخوانی می‌گردد

روی داد invalid:
این اتفاق افتاد را بصورت تحت تمجید نمائید:

input.addEventListener(‘invalid’, function(event){

event.preventDefault();

if ( ! event.target.validity.valid ) {

elem.textContent = ‘Username should only contain lowercase letters e.g. john’;

elem.className = ‘error’;

elem.style.display = ‘block’;

input.className = ‘invalid animated shake’;

}

});

توضیح: در متد فوق، در آغاز با تعریف و تمجید event.preventDefault() از اکران پاپ آپ پیش فرض مرورگر خودداری کرده ایم. بجای آن ما میخواهیم div ای که در ابتدا تعریف‌و‌تمجید کرده ایم را به استفاده کننده اکران دهیم. کلاس error را به آن اعمال کرده ایم و خواص display آنرا برابر block تمجید کرده ایم.

تعریف‌و‌تمجید کلاس های invalid، animated و shake:
کلاس invalid را برای input تمجید کرده ایم که در کد ذیل این کلاس را تعریف‌و‌تمجید میکنیم:

input.invalid {

border-color: #DD2C00;

}

علاوه بر کلاس invalid ، دو کلاس animated و shake را نیز برای input نامعتبر در حیث گرفته ایم که برای به کارگیری از این کلاس ها می‌توانید از کارتن های Animate.css به کار گیری فرمایید.

» پیشنهاد میشود نوشته ی علمی “فراگیری تکنیک های CSS” را مطالعه فرمایید.
تعریف‌و‌تمجید اتفاق افتاد input:
اتفاق افتاد دوم که بایستی گزینه به کارگیری قرار گیرد، input میباشد. این اتفاق افتاد هنگامی فراخوانی میگردد که مقدار باطن input تغییر و تحول نماید. ما از این روی داد برای برعکس کردن وضعیت اعتبار input به کار گیری می‌کنیم. یعنی در شرایطی که خواص display فیلد برابر block می‌باشد، آنرا none می‌نماید. تصویر ذیل را دراین مورد در لحاظ بگیرید:

اعمال افکت و کارتون به اعتبارسنجی html5

اعتبارسنجی سمت سرور و سمت استفاده کننده:
فراموش نکنید که علاوه بر اعتبارسنجی کلاینت ساید (ClientSide Validation) می بایست اعتبارسنجی را در سمت و سوی سرور (Serverside) نیز انجام دهید. نکته جذاب اینست که در حالتی‌که استفاده کننده، امکان javascript مرورگر خویش را غیرفعال کرده‌باشد، همچنان پیام های خطای مرتبط با اعتبارسنجی فرم های HTML5 را تماشا خواهد کرد. صرفا مرورگری که از اتریبیوت pattern پشتیبانی نمی نماید، مرورگر سافاری (Safari Browser) هست که در کشور ایران محبوبیت چندانی ندارد.